<template>
  <div>
    <!-- 搜索 -->
    <div class="ser_div">
      <el-row>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 订单号 </el-col>
            <el-col :span="16">
              <el-input v-model="ser.order_number" type="number"></el-input>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 流水号 </el-col>
            <el-col :span="16">
              <el-input v-model="ser.serial_number"></el-input>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 客户 </el-col>
            <el-col :span="16">
              <el-select
                v-model="ser.customer_id"
                filterable
                placeholder="请选择客户"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in CustomerList"
                  :key="index"
                  :label="item.customer_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 产品 </el-col>
            <el-col :span="16">
              <el-select
                v-model="ser.product_id"
                filterable
                @change="product_id_change"
                placeholder="请选择产品"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in productList"
                  :key="index"
                  :label="item.product_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 型号 </el-col>
            <el-col :span="16">
              <el-select
                filterable
                v-model="ser.model_number_id"
                placeholder="请选择型号"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in ModelNumberList"
                  :key="index"
                  :label="item.model_number"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 订单日期范围 </el-col>
            <el-col :span="16">
              <el-date-picker
                v-model="order_data"
                @change="order_data_change"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-button @click="search(0)" class="add_btn" icon="el-icon-search"
            >查询</el-button
          >
          <el-button @click="searchreset" icon="el-icon-refresh" class="add_btn"
            >重置</el-button
          >
          <el-button
            @click="search(2)"
            icon="el-icon-plus"
            class="add_btn"
            v-permission="['dingdanshenhe_daochu']"
            >导出</el-button
          >
        </el-col>
      </el-row>
    </div>

    <el-table
      :data="dataList"
      v-loading="loading"
      stripe
      style="width: 100%"
      border
    >
      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column label="审核进度" width="280">
        <template slot-scope="scope">
          <div
            style="
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              text-align: center;
            "
          >
            <div v-for="(item, index) in scope.row.audit_log" :key="index">
              <div
                style="
                  width: 100%;
                  height: 100%;
                  display: flex;
                  align-items: center;
                  text-align: center;
                "
              >
                <div v-if="item.order_audit_name == 'info_status'">
                  <div
                    :class="[
                      'line',
                      scope.row.info_status == 1
                        ? ' tongguo'
                        : scope.row.info_status == 2
                        ? 'weishenhe'
                        : 'bohui',
                    ]"
                    @dblclick="db_pushorder(item.remark, scope.row.info_status)"
                  >
                    <span>订单</span>
                    <span>审核</span>
                  </div>
                  <p style="padding: 0; margin: 0">
                    {{
                      scope.row.info_status == 1
                        ? "已通过"
                        : scope.row.info_status == 2
                        ? "未审核"
                        : "已驳回"
                    }}
                  </p>
                </div>

                <span
                  v-if="
                    (item.order_audit_name == 'info_status') &
                    (scope.row.audit_log.length > 1)
                  "
                  class="el-icon-caret-right"
                  style="font-size: 30px; color: chocolate; margin-bottom: 24px"
                ></span>
                <div v-if="item.order_audit_name == 'material_status'">
                  <div
                    :class="[
                      'line',
                      scope.row.material_status == 1
                        ? ' tongguo'
                        : scope.row.material_status == 2
                        ? 'weishenhe'
                        : 'bohui',
                    ]"
                    @dblclick="
                      db_pushorder(item.remark, scope.row.material_status)
                    "
                  >
                    <span>物料</span>
                    <span>审核</span>
                  </div>
                  <p style="padding: 0; margin: 0">
                    {{
                      scope.row.material_status == 1
                        ? "已通过"
                        : scope.row.material_status == 2
                        ? "未审核"
                        : "已驳回"
                    }}
                  </p>
                </div>
                <span
                  v-if="
                    item.order_audit_name == 'material_status' &&
                    scope.row.audit_log.length > 2
                  "
                  class="el-icon-caret-right"
                  style="font-size: 30px; color: chocolate; margin-bottom: 24px"
                ></span>
                <span
                  v-if="
                    item.order_audit_name == 'material_status' &&
                    (index == 0) & (scope.row.audit_log.length > 1)
                  "
                  class="el-icon-caret-right"
                  style="font-size: 30px; color: chocolate; margin-bottom: 24px"
                ></span>

                <div v-if="item.order_audit_name == 'financial_status'">
                  <div
                    :class="[
                      'line',
                      scope.row.financial_status == 1
                        ? ' tongguo'
                        : scope.row.financial_status == 2
                        ? 'weishenhe'
                        : 'bohui',
                    ]"
                    @dblclick="
                      db_pushorder(item.remark, scope.row.financial_status)
                    "
                  >
                    <span>财务</span>
                    <span>审核</span>
                  </div>
                  <p style="padding: 0; margin: 0">
                    {{
                      scope.row.financial_status == 1
                        ? "已通过"
                        : scope.row.financial_status == 2
                        ? "未审核"
                        : "已驳回"
                    }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="serial_number" label="流水号" width="120">
      </el-table-column>
      <el-table-column prop="order_number" label="订单号" width="120">
      </el-table-column>
      <el-table-column label="紧急程度" width="120" sortable>
        <template slot-scope="scope">
          <span
            v-if="scope.row.emergency_procedure == 1"
            style="color: #6880c6; font-weight: bold"
            >普通</span
          >
          <span
            v-if="scope.row.emergency_procedure == 2"
            style="color: #e77911; font-weight: bold"
            >紧急</span
          >
          <span
            v-if="scope.row.emergency_procedure == 3"
            style="color: #e71f11; font-weight: bold"
            >十万火急</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="delivery_date" label="业务员">
        <template slot-scope="scope">
          <span>{{
            scope.row.account_executive
              ? scope.row.account_executive.company_name
              : ""
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="customer" label="客户" width="80">
        <template slot-scope="scope">
          <span>{{
            scope.row.customer ? scope.row.customer.customer_name : ""
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="product_name" label="产品" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.product_name.product_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="型号" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.model_number?scope.row.model_number.model_number:'' }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="型号图片" width="90">
        <template slot-scope="scope">
          <div v-if="scope.row.model_number?scope.row.model_number.file != null">
            <img
              :src="uploadImgUrl + scope.row.model_number.file.file_url"
              @click="push_img(scope.row)"
              style="
                cursor: pointer;
                display: block;
                width: 60px;
                display: block;
                margin: 0 auto;
              "
            />
          </div>
          <img
            src="../../../src/assets/zwtp.jpg"
            style="width: 60px; display: block; margin: 0 auto"
            v-else
          />
        </template>
      </el-table-column> -->
      <el-table-column prop="color" label="规格" width="80">
        <template slot-scope="scope">
          <span>{{
            scope.row.specification ? scope.row.specification.specification : ""
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="color" label="颜色" width="80">
        <template slot-scope="scope">
          <span>{{scope.row.color? scope.row.color.color:'' }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="delivery_date" label="大小" width="120" sortable>
      </el-table-column> -->
      <el-table-column prop="direction" label="方向" width="70">
      </el-table-column>
      
      <el-table-column
        prop="order_date"
        label="订单日期"
        :formatter="formatterTime"
        width="120"
        sortable
      >
      </el-table-column>
      <el-table-column
        prop="delivery_date"
        label="交货日期"
        :formatter="formatterTime"
        width="120"
        sortable
      >
      </el-table-column>
      <el-table-column prop="receivables" label="应收款" width="120" sortable>
      </el-table-column>
      <el-table-column prop="received" label="定金" width="120">
      </el-table-column>
      <el-table-column  label="件数" width="120">
        <template slot-scope="scope">
          {{scope.row.models_field.cases_num}}
        </template>
      </el-table-column>
      <el-table-column  label="折扣" width="120">
        <template slot-scope="scope">
          {{scope.row.models_field?scope.row.models_field.discount:''}}
        </template>
      </el-table-column>
      <el-table-column  label="余款" width="120">
        <template slot-scope="scope">
          {{scope.row.models_field?scope.row.models_field.residual_payment:''}}
        </template>
      </el-table-column>
      <el-table-column
        prop="collection_time"
        label="收款时间"
        :formatter="formatterTime"
        width="120"
        sortable
      >
      </el-table-column>
      <el-table-column  label="是否已收余款" width="120">
        <template slot-scope="scope">
          {{scope.row.is_residual_payment==1?'是':'否'}}
        </template>
      </el-table-column>
      <el-table-column  label="订单等级" width="120">
        <template slot-scope="scope">
          {{scope.row.level}}
        </template>
      </el-table-column>
      

      <el-table-column label="是否补货" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.is_replenishment == 1">是</span>
          <span v-if="scope.row.is_replenishment == 2">否</span>
        </template>
      </el-table-column>
      <el-table-column label="是否备货" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.is_stock_up == 1">是</span>
          <span v-if="scope.row.is_stock_up == 2">否</span>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="120">
      </el-table-column>
      <el-table-column label="操作" width="80" fixed="right">
        <template slot-scope="scope">
          <el-button @click="set_product(scope.row)" type="primary" size="small"
            >审核</el-button
          >
          <!-- <el-button @click="set_products(scope.row)" type="text" icon="el-icon-edit">修改</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        @prev-click="prev"
        @next-click="next"
        :current-page.sync="pagination.page"
        :page-size="pagination.per_page"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="isProduct"
      width="40%"
      :close-on-click-modal="false"
      @close="dialog_close"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="流水号" prop="serial_number">
              <el-input
                v-model="ruleForm.serial_number"
                :disabled="disableds"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单号" prop="order_number">
              <el-input
                v-model="ruleForm.order_number"
                type="number"
                :disabled="disableds"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="下单日期" prop="order_date">
              <el-date-picker
                v-model="ruleForm.order_date"
                type="date"
                format="yyyy 年 MM 月 dd 日"
                @change="onInput"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交货日期" prop="delivery_date">
              <el-date-picker
                v-model="ruleForm.delivery_date"
                type="date"
                format="yyyy 年 MM 月 dd 日"
                @change="onInput"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="业务员">
              <el-select
                v-model="ruleForm.account_executive_id"
                placeholder="请选择业务员"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in EmployeeList"
                  :key="index"
                  :label="item.company_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品" prop="product_id">
              <el-select
                v-model="ruleForm.product_id"
                placeholder="请选择产品"
                style="width: 100%"
                disabled
                @change="product_id_change"
              >
                <el-option
                  v-for="(item, index) in productList"
                  :key="index"
                  :label="item.product_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="型号" prop="model_number_id">
              <el-select
                filterable
                v-model="ruleForm.model_number_id"
                @change="model_number_id_change"
                placeholder="请选择型号"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in ModelNumberList"
                  :key="index"
                  :label="item.model_number"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="颜色" prop="color_id">
              <el-select
               @change="yanse_change"
                filterable
                allow-create
                v-model="ruleForm.color_id"
                placeholder="请选择颜色"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in ColorList"
                  :key="index"
                  :label="item.color"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="规格" prop="specification_id">
              <el-select
                @change="guige_change"
                filterable
                allow-create
                v-model="ruleForm.specification_id"
                placeholder="请选择规格"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in SpecificationList"
                  :key="index"
                  :label="item.specification"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="方向">
              <el-select
                filterable
                allow-create
                v-model="ruleForm.direction"
                placeholder="请选择方向"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in directionList"
                  :key="index"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户" prop="customer_id">
              <el-select
                v-model="ruleForm.customer_id"
                placeholder="请选择工种"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in CustomerList"
                  :key="index"
                  :label="item.customer_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否备货" prop="is_stock_up">
              <el-radio-group v-model="ruleForm.is_stock_up">
                <el-radio label="1">是</el-radio>
                <el-radio label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="紧急程度" prop="emergency_procedure">
              <el-radio-group v-model="ruleForm.emergency_procedure">
                <el-radio label="1">普通</el-radio>
                <el-radio label="2">紧急</el-radio>
                <el-radio label="3">十万火急</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否补录" prop="is_replenishment">
              <el-radio-group v-model="ruleForm.is_replenishment">
                <el-radio label="1">是</el-radio>
                <el-radio label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="应收款" >
              <el-input
                v-model="ruleForm.receivables"
                @change="onInput"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="定金" >
              <el-input
                v-model="ruleForm.received"
                @change="onInput"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="ruleForm.remark"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 10 }"
            @change="onInput"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="尺寸" prop="size">
          <el-input v-model="ruleForm.size"></el-input>
        </el-form-item> -->
        <el-divider content-position="center" v-if="FieldList.length > 0"
          >额外属性</el-divider
        >
        <div class="list_order" v-if="FieldList.length > 0">
          <div class="lis" v-for="(item, index) in FieldList_new" :key="index">
            <el-form-item :label="item.name">
              <el-input
                v-if="item.formtype == 'input'"
                v-model="item.default_value"
                type="input"
                disabled
                @input="ewai_input(item.default_value,item.field)"
              ></el-input>
              <el-select
                v-if="item.formtype == 'select'"
                v-model="item.default_value"
                placeholder="请选择"
                disabled
              >
                <el-option
                  v-for="(ite, index) in item.option_list"
                  :key="index"
                  :label="ite.option_name"
                  :value="ite.option_id"
                >
                </el-option>
              </el-select>

              <el-radio-group
                v-if="item.formtype == 'radio'"
                v-model="item.default_value"
                disabled
              >
                <el-radio
                  v-for="(ite, index) in item.option_list"
                  :key="index"
                  :label="ite.option_id"
                  >{{ ite.option_name }}</el-radio
                >
              </el-radio-group>

              <el-date-picker
                v-if="item.formtype == 'datetime'"
                v-model="item.default_value"
                disabled
                type="date"
                format="yyyy 年 MM 月 dd 日"
                style="width: 100%"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
          </div>
        </div>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="isProduct = false"
          >关闭</el-button
        >
        <!-- <el-button @click="isbutongguo=true" >不通过</el-button> -->
        <!-- 财务按钮 -->
        <!-- <el-button
          type="primary"
          size="small"
          style="margin-right: 10px"
          @click="submitadd('ruleForm')"
          v-permission="['caiwushenhe']"
          v-if="
            ruleForm.financial_status == 2 && ruleForms.material_status == 1
          "
          >通过</el-button
        > -->
        <!-- 物料按钮 -->
        <!-- <el-button
          type="primary"
          size="small"
          style="margin-right: 10px"
          @click="submitadd('ruleForm')"
          v-permission="['wuliaoshenhe']"
          v-if="ruleForm.material_status==2"
          >通过</el-button
        > -->
        <!-- 订单按钮 -->
        <el-button
          type="primary"
          size="small"
          style="margin-right: 10px"
          @click="submitadd('ruleForm')"
          v-permission="['dingdanshenhe']"
          v-if="ruleForm.info_status == 2"
          >通过</el-button
        >

        <el-popconfirm
          v-permission="['dingdanshenhe_shanchu']"
          confirm-button-text="确定"
          cancel-button-text="取消"
          icon="el-icon-info"
          icon-color="red"
          title="确定删除此订单吗？"
          @confirm="del_Order(ruleForm.id)"
        >
          <el-button type="primary" size="small" slot="reference"
            >删除</el-button
          >
        </el-popconfirm>
      </span>
    </el-dialog>

    <bigimg
      :imgurl="bigurl"
      :product="bigproduct"
      :model_number="bigmodel_number"
      ref="img_big"
    ></bigimg>

    <!-- <el-dialog title="驳回原因" :visible.sync="isbutongguo" width="40%" :close-on-click-modal="false"
      @close="dialog_close">
      <el-input v-model="butongguo" placeholder="请输入驳回原因"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isbutongguo=false">取消</el-button>
        <el-button type="primary" @click="submitadd(3)">确定</el-button>
      </span>
    </el-dialog>


    <el-dialog title="驳回原因" :visible.sync="showyuanyin" width="40%" :close-on-click-modal="false"
      @close="dialog_close">
      <p>{{bohuiyuanyin}}</p>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showyuanyin=false">知道了</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
import {
  createOrder,
  getColorList,
  getSpecificationList,
  auditOrder,
  getAuditOrderList,
  getCustomerList,
  getModelNumberList,
  getProductList,
  delOrder,
  getProductColorList,
  getAuditOrderList_exports,
  createSpecification,
  createColor,
  getProductFieldList
} from "@/api/product/index";

import { getYeWuYuanList } from "@/api/user";
import bigimg from "@/components/bigimg";
export default {
  components: {
    bigimg,
  },
  data() {
    return {
      directionList:[
        {
          name:'左'
        },
        {
          name:'右'
        },
        {
          name:'无'
        }
      ],
      loading: true,
      disableds: false,
      SpecificationList_s: [],
      ModelNumberList_s: [],
      ColorList_s: [],
      bigurl: "",
      bigproduct: "",
      bigmodel_number: "",
      // 搜索
      uploadImgUrl: this.$global.imgQianJui,
      ModelNumberLists: [],
      ModelNumberList: [],
      order_data: [],
      ser: {
        serial_number: "",
        model_number_id: "",
        order_number: "",
        customer_id: "",
        product_id: "",
        order_date: "",
        is_replenishment: "",
        is_stock_up: "",
        start_time: "",
        end_time: "",
      },
      CustomerList: [],
      productList: [],

      disabled: false,
      bohuiyuanyin: "",
      showyuanyin: false,
      isbutongguo: false,
      butongguo: "",
      isset: false,
      moreList: [],
      moreLists: {},
      isProducts: false,
      isadd: false,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      formatterTime(row, column) {
        let data = row[column.property];
        return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data);
      },
      title: "",
      isProduct: false,
      dataList: [],
      ruleForm: {
        serial_number: "",
        order_number: "",
        order_date: "",
        delivery_date: "",
        account_executive_id: "",
        product_id: "",
        model_number_id: "",
        color_id: "",
        size: "",
        specification_id: "",
        direction: "",
        customer_id: "",
        received: "",
        emergency_procedure: "1",
        is_replenishment: "1",
        is_stock_up: "1",
        receivables: "",
        remark: "",
        id: "",
      },
      ruleForms: {},
      rules: {
        specification_id: [
          {
            required: true,
            message: "请选择规格",
            trigger: "blur",
          },
        ],
        serial_number: [
          {
            required: true,
            message: "请输入流水号",
            trigger: "blur",
          },
        ],
        order_number: [
          {
            required: true,
            message: "请输入订单号",
            trigger: "blur",
          },
        ],
        order_date: [
          {
            required: true,
            message: "请选择下单日期",
            trigger: "blur",
          },
        ],
        delivery_date: [
          {
            required: true,
            message: "请选择交货日期",
            trigger: "blur",
          },
        ],
        account_executive_id: [
          {
            required: true,
            message: "请选择员工",
            trigger: "blur",
          },
        ],
        product_id: [
          {
            required: true,
            message: "请选择产品",
            trigger: "blur",
          },
        ],
        model_number_id: [
          {
            required: true,
            message: "请选择型号",
            trigger: "blur",
          },
        ],
        color_id: [
          {
            required: true,
            message: "请选择颜色",
            trigger: "blur",
          },
        ],
        size: [
          {
            required: true,
            message: "请选择规格",
            trigger: "blur",
          },
        ],
        direction: [
          {
            required: true,
            message: "请输入产品方向",
            trigger: "blur",
          },
        ],
        customer_id: [
          {
            required: true,
            message: "请选择客户",
            trigger: "blur",
          },
        ],
        emergency_procedure: [
          {
            required: true,
            message: "请选择紧急程度",
            trigger: "blur",
          },
        ],
        is_replenishment: [
          {
            required: true,
            message: "是否补货",
            trigger: "blur",
          },
        ],
        is_stock_up: [
          {
            required: true,
            message: "是否备货",
            trigger: "blur",
          },
        ],
        receivables: [
          {
            required: true,
            message: "请输入应收款金额",
            trigger: "blur",
          },
        ],
      },
      pagination: {
        per_page: 10,
        page: 1,
      },
      total: 0,
      EmployeeList: [],
      ColorList: [],
      SpecificationList: [],
      // 指派提交数据
      push_prder: {
        child_order_id: "",
        employee_user_id: "",
      },
      push_more: {},
      pushCustomerList: [], //指定工种员工列表
      // 外包提交
      order_audit_name: "",
      FieldList: [],
      FieldList_new: [],
    };
  },
  mounted() {
    this.getlist();
    this.getEmpl();
    this.getColor();
    this.getSpecification();

    this.getproduct();
    this.getModel();
    this.getCustomer();
  },
  methods: {
    get_ProductFieldLists(val) {
      getProductFieldList({ product_id: val }).then((res) => {
        if (res.code == 200) {
          this.FieldList = res.data;
          this.FieldList_new = [];
          this.FieldList.forEach((item) => {
            if (item.is_default == 2) {
              this.FieldList_new.push(item);
            }
            if (item.is_default == 2) {
              this.$nextTick(()=>{
                 this.$set(this.ruleForm, item.field, item.default_value);
              })
             
            }
          });

          console.log(this.FieldList_new);
        }
      });
      
    },
    yanse_change(val) {
      var list = [];
      for (let i = 0; i < this.ColorList.length; i++) {
        list.push(this.ColorList[i].id);
      }
      if (!list.includes(val)) {
        this.create_Color(val);
      }
    },
    create_Color(val) {
      let lists = [];
      let list = [];
      list.push(val);
      lists.push(this.ruleForm.product_id);
      let obj = {
        product_ids: lists,
        color_names: list,
      };
      createColor(obj).then((res) => {
        if (res.code == 200) {
          let lengths = this.ColorList.length;
          this.$set(this.ColorList, lengths, { id: res.data[0], color: val });
          this.get_produccolor(this.ruleForm.product_id);
          let that=this
          setTimeout(() => {
            that.ruleForm.color_id = res.data[0];
          }, 500);
          console.log(this.ColorList);
        }
      });
    },
    guige_change(val) {
      console.log(val);
      var list = [];
      console.log(this.SpecificationList);
      for (let i = 0; i < this.SpecificationList.length; i++) {
        list.push(this.SpecificationList[i].id);
      }
      if (!list.includes(val)) {
        this.update_Specification(val);
      }
    },
    update_Specification(val) {
      let specification_id = [];
      specification_id.push(val);
      let obj = {
        product_id: this.ruleForm.product_id,
        model_number_id: this.ruleForm.model_number_id,
        specification_ids: specification_id,
      };
      createSpecification(obj).then((res) => {
        if (res.code == 200) {
          
          let lengths = this.SpecificationList.length;
          this.$set(this.SpecificationList, lengths, {
            id: res.data[0],
            specification: val,
          });
          console.log(this.SpecificationList);
          this.model_number_id_changes(
            this.ruleForm.product_id,
            this.ruleForm.model_number_id
          );
        }
        let that=this
        setTimeout(() => {
          this.ruleForm.specification_id = res.data[0];
          }, 500);
      });
    },
    del_Order(id) {
      delOrder({ id }).then((res) => {
        if (res.code == 200) {
          this.$message.success("操作成功");
          this.isProduct = false;
          this.getlist();
        }
      });
    },
    onInput() {
      this.$nextTick(() => {
        this.$forceUpdate();
      });
    },

    push_img(row) {
      this.bigurl = row.model_number.file.file_url;
      this.bigproduct = row.product_name.product_name;
      this.bigmodel_number = row.model_number.model_number;
      this.$refs.img_big.open();
    },
    // 指定查询
    search(type) {
      if (type == 0) {
        this.pagination.per_page = 10;
        this.pagination.page = 1;
      }
      getAuditOrderList({ ...this.ser, ...this.pagination }).then((res) => {
        if (res.code == 200) {
          this.dataList = res.data.data;
          this.total = res.data.total;
          if (type == 2) {
            if (res.data.data.length > 0) {
              this.$message.success("正在导出订单列表");
              this.exports_w();
            }
          }
        }
      });
    },
    // 导出
    exports_w() {
      let data = {
        ...this.ser,
        export: 1,
      };
      getAuditOrderList_exports(data).then((res) => {
        //创建一个隐藏的a连接，
        const link = document.createElement("a");
        let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
        link.style.display = "none";
        //设置连接
        link.href = URL.createObjectURL(blob);
        link.download = "审核列表";
        document.body.appendChild(link);
        //模拟点击事件
        link.click();
      });
    },
    searchreset() {
      this.ser = {
        model_number_id: "",
        order_number: "",
        customer_id: "",
        product_id: "",
        order_date: "",
        is_replenishment: "",
        is_stock_up: "",
        start_time: "",
        end_time: "",
      };
      this.getlist();
    },
    //客户列表
    getCustomer() {
      getCustomerList({ per_page: 1000 }).then((res) => {
        if (res.code == 200) {
          this.CustomerList = res.data.data;
        }
      });
    },
    //产品列表
    getproduct() {
      getProductList().then((res) => {
        if (res.code == 200) {
          this.productList = res.data.data;
        }
      });
    },
    // 型号列表
    getModel() {
      getModelNumberList().then((res) => {
        if (res.code == 200) {
          this.ModelNumberLists = res.data.data;
        }
      });
    },
    model_number_id_change(val) {
      console.log(val);
      this.SpecificationList = [];
      this.ruleForm.specification_id = "";
      this.model_number_id_changes(this.ruleForm.product_id, val);
    },
    order_data_change(val) {
      this.ser.start_time = val[0];
      this.ser.end_time = val[1];
    },

    get_produccolor(id) {
      getProductColorList({ product_id: id }).then((res) => {
        if (res.code == 200) {
          this.ColorList = res.data;
        }
      });
    },
    product_id_change(val) {
      console.log(val);
      this.ser.model_number_id = "";
      this.get_produccolor(val);
      this.get_producModel(val);
    },
    get_producModel(id) {
      getModelNumberList({ product_id: id ,field_list:'id,model_number',is_dropdown:1}).then((res) => {
        if (res.code == 200) {
          this.ModelNumberList = res.data.data;
        }
      });
    },
    model_number_id_changes(id, ids) {
      let obj = {
        product_id: id,
        model_number_id: ids,
      };
      getSpecificationList(obj).then((res) => {
        if (res.code == 200) {
          this.SpecificationList = res.data.data;
        }
      });
    },

    db_pushorder(row, type) {
      if (type == 3) {
        this.bohuiyuanyin = row;
        this.showyuanyin = true;
      }
    },
    // 规格列表
    getSpecification() {
      getSpecificationList().then((res) => {
        if (res.code == 200) {
          this.SpecificationList = res.data.data;
        }
      });
    },
    // 颜色列表
    getColor() {
      getColorList().then((res) => {
        if (res.code == 200) {
          this.ColorList = res.data.data;
        }
      });
    },
    // 业务员列表
    getEmpl() {
      getYeWuYuanList().then((res) => {
        if (res.code == 200) {
          this.EmployeeList = res.data;
        }
      });
    },

    getlist() {
      getAuditOrderList({ ...this.pagination, ...this.ser }).then((res) => {
        if (res.code == 200) {
          this.dataList = res.data.data;
          this.total = res.data.total;
          this.loading = false;
        }
      });
    },
    set_products(row) {
      this.ruleForm = row;
      console.log(row);
      for (let item in row) {
        this.$set(this.ruleForm, item, row[item]);
      }
      this.title = "订单修改";
      this.isProduct = true;
      this.isadd = true;
      this.disabled = false;
    },
    set_product(row) {
      this.$nextTick(() => {
        this.ruleForm = row;
      });
      this.product_id_change(row.product_id);
      this.get_producModel(row.product_id);
      this.get_produccolor(row.product_id);
      this.model_number_id_changes(row.product_id, row.model_number_id);
      this.get_ProductFieldLists(row.product_id)
      this.title = "订单审核";
      this.isProduct = true;
      this.isadd = true;
      this.disableds = true;
      console.log(row);
      for (let i = 0; i < row.audit_log.length; i++) {
        if (
          (row.audit_log[i].res == 0) &
          (row.audit_log[i].order_audit_name == "info_status")
        ) {
          this.order_audit_name = row.audit_log[i].order_audit_name;
          break;
        }
        if (
          (row.audit_log[i].res == 0) &
          (row.audit_log[i].order_audit_name == "material_status")
        ) {
          this.order_audit_name = row.audit_log[i].order_audit_name;
          break;
        }
        if (
          (row.audit_log[i].res == 0) &
          (row.audit_log[i].order_audit_name == "financial_status")
        ) {
          this.order_audit_name = row.audit_log[i].order_audit_name;
          break;
        }
      }
      getModelNumberList({ per_page: 1000 }).then((res) => {
        if (res.code == 200) {
          this.ModelNumberList_s = res.data.data;
        }
      });
      getColorList({ per_page: 1000 }).then((res) => {
        if (res.code == 200) {
          this.ColorList_s = res.data.data;
        }
      });

      getSpecificationList({ per_page: 1000 }).then((res) => {
        if (res.code == 200) {
          this.SpecificationList_s = res.data.data;
        }
      });

      console.log(this.order_audit_name);
    },
    dialog_close() {
      this.ruleForm = {
        serial_number: "",
        order_number: "",
        order_date: "",
        delivery_date: "",
        account_executive_id: "",
        product_id: "",
        model_number_id: "",
        color_id: "",
        size: "",
        specification_id: "",
        direction: "",
        customer_id: "",
        received: "",
        emergency_procedure: "1",
        is_replenishment: "1",
        is_stock_up: "1",
        receivables: "",
        remark: "",
        id: "",
      };
    },
    submitadd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          createOrder(this.ruleForm).then((res) => {
            if (res.code == 200) {
              this.isProduct = false;
              // this.$message.success('提交成功')
              this.shenhe_sub();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    shenhe_sub() {
      let query = {
        id: this.ruleForm.id,
        status: "1",
        remark: this.butongguo,
        field: this.order_audit_name,
      };
      auditOrder(query).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "提交成功",
            type: "success",
          });
          this.isProduct = false;
          this.isbutongguo = false;
          this.getlist();
        }
      });
    },
    // submitadd(status) {
    //   this.submitadds()
    //   if(this.order_audit_name=='问题订单'){
    //     this.$message({
    //       type: "error",
    //       message: "当前订单已被驳回",
    //     });
    //     return false;

    //   }else{
    //     if(status==3){
    //       if(this.butongguo==''){
    //           this.$message({
    //             type: "error",
    //             message: "请输入驳回原因",
    //           });
    //           return false;
    //       }
    //     }
    //   let query = {
    //     id: this.ruleForm.id,
    //     status,
    //     remark:this.butongguo,
    //     field:this.order_audit_name,
    //   };
    //   auditOrder(query).then((res) => {
    //     if (res.code == 200) {
    //       this.$message({
    //         message: "提交成功",
    //         type: "success",
    //       });

    //       this.isProduct = false;
    //       this.isbutongguo=false
    //       this.getlist();
    //     }
    //   });
    // }
    // },
    handleSizeChange(val) {
      console.log(val);
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagination.page = val;
      this.getlist();
    },
    prev() {
      this.pagination.page = this.pagination.page - 1;
      this.getlist();
    },
    next() {
      console.log("ss");
      this.pagination.page = this.pagination.page + 1;
      this.getlist();
    },
  },
};
</script>

<style scoped>
.line {
  width: 65px;
  height: 65px;
  border-radius: 65px;
  color: #fff;
  background: #6880c6;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tongguo {
  background: #17a33d !important;
}

.weishenhe {
  background: #4970e5 !important;
}

.bohui {
  background: #b13131 !important;
}
.list_order {
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: left;
}
.list_order .lis {
  width: 100%;
}
</style>
